<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import {Goods} from "@element-plus/icons";
import {Printer} from "@element-plus/icons";
import Good from './components/Goods.vue'
import Print from './components/Printer.vue'
import {onMounted, provide, ref} from "vue";
import {useGoodsStore} from "./store/useGoodsStore";
import {useCategoryStore} from '@/store/useCategoryStore'

let goodsRef = ref()
let printRef = ref()

let {get_category_all} = useCategoryStore();
let {get_goods_all} = useGoodsStore();

// 声明 商品表集合 对象
let commodities = ref([]);
// 声明 商品分类表集合 对象
let categories = ref([]);

// 将 商品表集合及商品分类表集合 挂载到 provide 上
provide('commodities',commodities)
provide('categories',categories)

const appFlush = () => {
  goodsRef.value.goodsManageFlush();
}
const appPrint = () => {
  printRef.value.get_goods_result_all();
}

// 将 get_category_all 和 get_goods_all 挂载到 provide 上
provide('get_category_all',get_category_all);
provide('get_goods_all',get_goods_all)
provide('get_goods_result_all',appPrint)



// 页面加载时 获取 商品表集合及商品分类表集合
onMounted(()=>{
  // 获取 商品分类表集合
  get_category_all().then(res=>{
    categories.value = [];
    JSON.parse(res).forEach(item => {
      categories.value.push({'label':item.name,'value':item.id});
    });
  })

  // 获取 商品表集合
  get_goods_all().then(res=>{
    commodities.value = JSON.parse(res);
  })

  // appFlush();
})

</script>

<template>
  <div class="manager-container">
    <el-tabs type="border-card" class="demo-tabs" model-value="printer">
      <el-tab-pane label="goods" name="goods">
        <template #label>
        <span class="custom-tabs-label">
          <el-icon><Goods/></el-icon>
          <span> 商品管理 </span>
        </span>
        </template>
        <Good ref="goodsRef" @goodsFlush = "appFlush"/>
      </el-tab-pane>
      <el-tab-pane label="printer" name="printer" class="demo-tabs">
        <template #label>
          <span class="custom-tabs-label">
          <el-icon><Printer/></el-icon>
          <span> 激光雕刻 </span>
        </span>
        </template>
        <Print @printFlush = "appFlush" ref="printRef"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.manager-container {
  width: 100vw;
  height: calc(100vh - 75px);

  background-color: #03030303;

  .el-tabs {
    width: 100vw;
    margin: 0 auto ;


    .demo-tabs > .el-tabs__content {
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
      padding:0 ;
      margin:0 ;

    }

    .demo-tabs .custom-tabs-label .el-icon {
      vertical-align: middle;
    }

    .demo-tabs .custom-tabs-label span {
      vertical-align: middle;
      margin-left: 6px;
    }
  }
}

::v-deep(.el-tab-pane) {
  height: 100%;

}


</style>
